<template>
  <div>
    <div class="button-group">
      <el-button @click="add">添加</el-button>
    </div>
    <!-- 查询表单 -->
    <el-form :inline="true">
      <el-form-item>
        <el-input placeholder="请输入科室名称" v-model="keyWord" clearable>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="did" label="科室id"> </el-table-column>
      <el-table-column prop="departmentName" label="科室名称">
      </el-table-column>
      <el-table-column prop="departmentNumber" label="科室编号">
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEdit(scope.row)" size="mini"
            ><font-awesome-icon :icon="['fas', 'edit']" style="font-size: 20px"
          /></el-button>
          <el-button type="danger" @click="handleDel(scope.row)" size="mini"
            ><font-awesome-icon
              :icon="['fas', 'remove']"
              style="font-size: 20px"
          /></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加弹出层 -->
    <el-dialog title="科室" :visible.sync="dialogFormVisible" width="500px">
      <el-form
        :model="Addform"
        style="width: 400px"
        ref="editForm"
        :rules="rules"
      >
        <el-form-item label="科室名称" label-width="80px" prop="departmentName">
          <el-input
            v-model="Addform.departmentName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑弹出层 -->
    <el-dialog title="科室" :visible.sync="dialogEditVisible" width="500px">
      <el-form
        :model="Editform"
        style="width: 400px"
        ref="editForm"
        :rules="rules"
      >
        <el-form-item label="科室名称" label-width="80px" prop="departmentName">
          <el-input
            v-model="Editform.departmentName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="Edit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { faArrowAltCircleRight } from '@fortawesome/free-solid-svg-icons'
  import {
    list_dept,
    add,
    del,
    like,
    edit,
    getByName,
  } from '../../api/department/api'
  export default {
    name: 'Dept',
    data() {
      return {
        tableData: [],
        Editform: {
          departmentName: '',
        },
        Addform: {
          departmentName: '',
        },
        rules: {
          departmentName: [
            { required: true, message: '请填写科室名称', trigger: 'blur' },
          ],
        },
        keyWord: '',
        dialogFormVisible: false, //控制编辑弹出层显示
        dialogEditVisible: false, //控制编辑弹出层显示
      }
    },
    mounted() {
      this.getTicket()
    },
    methods: {
      //
      Edit() {
        edit(this.Editform).then((res) => {
          this.$message.success('修改成功')
          this.getTicket()
        })
      },
      // 模糊查询
      onSubmit() {
        like(this.keyWord).then((res) => {
          this.tableData = res.data
        })
      },
      // 模糊查询数据
      getSearchTicket() {
        let that = this
      },

      // 获取当前页面数据
      getTicket() {
        let that = this
        list_dept().then((res) => {
          that.tableData = res.data
        })
      },

      // 添加
      add() {
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['editForm'].resetFields()
        })
      },
      handleAdd() {
        this.$refs['editForm'].validate(async (valid) => {
          if (valid) {
            let flag = true
            // this.tableData.forEach((item) => {
            //   if (item.departmentName === this.Addform.departmentName) {
            //     this.$message.info("已存在该科室");
            //     flag = false;
            //   }
            // });

            await getByName(this.Addform.departmentName).then((res) => {
              if (res.data) {
                flag = false
              }
            })
            if (!flag) {
              this.$message.info('添加失败，已存在该科室')
              // this.dialogFormVisible = false
              return
            }

            add(this.Addform).then((resp) => {
              console.log(resp)
              this.$message.success('添加成功!')
              this.dialogFormVisible = false
              this.getTicket()
            })
          } else {
            this.$message.error('请填写完整表单')
            return false
          }
        })
      },
      // 删除
      handleDel(rowData) {
        console.log(rowData)
        const did = rowData.did
        this.$confirm('此操作将永久删除该科室, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            console.log('did', did)
            del(did).then((res) => {
              if (res.code === '200') {
                this.$message.success('删除成功!')
                this.getTicket()
              } else if (res.code === '319') {
                this.$message.error(res.msg)
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
      },
      //编辑
      handleEdit(rowData) {
        // console.log(rowData);
        this.dialogEditVisible = true
        this.Editform.departmentName = rowData.departmentName
        this.Editform.did = rowData.did
      },
    },
  }
</script>

<style lang="css" scoped>
  .button-group {
    float: right;
  }
</style>
